<script type="text/javascript">
	$("#loading").hide();

	var mapOptions = {
		center: new google.maps.LatLng('-31.949735', '115.855256'),
		zoom: 15,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		disableDefaultUI: true,
		mapTypeControl: true,
		mapTypeControlOptions: {
			position: google.maps.ControlPosition.TOP_RIGHT
		},
		streetViewControl: true,
		streetViewControlOptions: {
			position: google.maps.ControlPosition.RIGHT_TOP
		},
	};
	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	

	var input = /** @type {HTMLInputElement} */(document.getElementById('target'));
	var searchBox = new google.maps.places.SearchBox(input);

	google.maps.event.addListener(searchBox, 'places_changed', function() {
		var places = searchBox.getPlaces();
		var bounds = new google.maps.LatLngBounds();

		bounds.extend(places[0].geometry.location);

		map.fitBounds(bounds);
		map.setZoom(17)
	});

	google.maps.event.addListener(map, 'bounds_changed', function() {
		var bounds = map.getBounds();
		searchBox.setBounds(bounds);
	});
	
	var infoWindowOptions = {
		content:"loading"
	};
	var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

	var addListener = function (layer) {
		google.maps.event.addListener(layer, 'click', function(event) {
			var infoWindowContent = event.infoWindowHtml;
			var infoWindowPosition = event.latLng;
			infoWindow.setContent(infoWindowContent);
			infoWindow.setPosition(infoWindowPosition);
			infoWindow.open(map);

			// this stuff will be used for when the user clicks on one of the layer points
			// put in here what you want to do when the user clicks here eg. display pie chart in a panel.

			jQuery("#detailsPanel").hide(1000);
			jQuery("#detailsPanel").show(1000);

			var devValue;
			var tempString;

			var stringStart = infoWindowContent.search("Estimated");
			var stringEnd = stringStart + 150;
			tempString = infoWindowContent.substring(stringStart,stringEnd);
			
			var stringStart = tempString.search("center");
			var stringEnd = tempString.search("</td");
			devValue = tempString.substring(stringStart + 9,stringEnd);
			devValue = parseInt(devValue.replace(/,/g,""));

			var stringStart = infoWindowContent.search("white");
			var stringEnd = infoWindowContent.search("</fo");
			var file = infoWindowContent.substring(stringStart + 7,stringEnd);

			var multiplyer = Math.floor(Math.random() * 6) + 1;
			var totalValue = multiplyer * devValue;

			data = new google.visualization.DataTable();
			data.addColumn('string', 'Development');
			data.addColumn('number', 'Value');
			data.addRows([
				[file , devValue],
				['Other Developments (fictitious value)', totalValue],
			]);

	        var options = {'title':'Percentage of Total Development Cost',
	                       'width':300,
	                       'height':300};

			chart.draw(data, options);
		});
	};
	var mraDataLayer = new google.maps.visualization.MapsEngineLayer({
		layerId: '16075412419356476951-04034578232300933337',
		map: map,
		clickable: 'true',
		suppressInfoWindows: 'true',
	});
	addListener(mraDataLayer);

	var zoomto = function(lat, lng) {
		coords = new google.maps.LatLng(lat, lng);
		map.setCenter(coords);
		map.setZoom(19);
	}

	var infopanelsearch = "<input name='docSearch' id='docSearch' type='text' placeholder='File Search'>";

	{{if layerData == "null":}}
		var infopanellist = "<p style='margin-left: 10px;'>no records found</p>"
	{{else:}}
		var infopanellist = "\
		{{for data in layerData:}}\
			<div class=\"filelist\" onclick=\"zoomto('{{=data[4]}}','{{=data[5]}}');\">\
				{{=data[0]}}</br>\
				{{=data[2]}}\
			</div>\
		{{pass}}\
		";

		zoomto('{{=layerData[0][4]}}','{{=layerData[0][5]}}');
	{{pass}}

	document.getElementById("infoPanel").innerHTML = infopanelsearch + infopanellist;

		// this is the listener for the "enter" keypress of the file search
	document.getElementById("docSearch").addEventListener("keydown", function(e) {
		if (!e) { var e = window.event; }
		//e.preventDefault(); // sometimes useful

		// Enter is pressed
		if (e.keyCode == 13) { $("#loading").show(); ajax('{{=URL("goToFile")}}',['docSearch'],'map-canvas'); }
	}, false);

</script>